<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<style type="text/css">
		ul li.yiji {
			list-style-image: url(img/-.gif);
		}
	</style>

	<body>
		<ul>
			<li class="yiji">主题市场
				<ul>
					<li>运动派
						<ul>
							<li>三级菜单a</li>
							<li>三级菜单b</li>
							<li>三级菜单c</li>
							<li>三级菜单d</li>
						</ul>
					</li>
					<li>有车族
						<ul>
							<li>三级
								<ul>
									<li>四级</li>
									<li>四级</li>
									<li>四级</li>
								</ul>
							</li>
							<li>三级</li>
							<li>三级</li>
							<li>三级</li>
						</ul>
					</li>
					<li>生活家</li>
				</ul>
			</li>
			<li class="yiji">特色购物
				<ul>
					<li>淘宝二手
						<ul>
							<li>淘宝二手--a</li>
							<li>淘宝二手--b</li>
							<li>淘宝二手--c</li>
							<li>淘宝二手--d</li>
						</ul>
					</li>
					<li>拍卖会</li>
					<li>爱逛街</li>
					<li>全球购</li>
					<li>淘女郎</li>
				</ul>
			</li>
			<li class="yiji">优惠促销
				<ul>
					<li>天天特价</li>
					<li>免费试用</li>
					<li>清仓</li>
					<li>1元起拍</li>
				</ul>
			</li>
			<li>工具</li>
		</ul>
		<script type="text/javascript" src="js/jquery-1.8.3.js" ></script>
		<script type="text/javascript">
			//给不包含ul的li把列表样式去掉
			$("li").not(":has(ul)").css("list-style","none");
			//给包含ul的li添加单击事件
			$("li:has(ul)").click(function(event){
				console.log(this);
				//如果是前对象触发了该事件（当前事件不是由事件传播而来）
				if( event.target == this ) {
					//如果当前对象的子元素目前为隐藏状态，则显示出来
					if( $(this).children().is(":hidden") ){
						//更改当前对象的样式，并让子元素显示
						$(this).css("list-style-image","url(img/-.gif)").children().show(500);
					} else {
						//更改当前对象的样式，并让子元素隐藏
						$(this).css("list-style-image","url(img/1.gif)").children().hide(500);
					}
				}
				
			});
		</script>
	</body>
</html>














